@extends('Home.Common')

@section('include_css')
    <style>

        .modal .form-horizontal .row>div>div span{
            color:#444;
            /*background-color: #00c0ef;*/
            display:inline-block;
            margin:3px 7px;
            border:1px solid #eee;
            border-radius: 3px;
            padding:3px 10px;
        }
        .modal .form-horizontal .row>div>div span:hover {
            background-color: #eee;
            border-color:#333;
        }
    </style>
@endsection

@section('include_js')
    <script type="text/javascript">
        $('.role-Add button.btn-primary').click(function(){
            var data = {};
            var res;
            data._token = $('meta[name=_token]').attr('content');
            data.name = $('.role-Add input[name=name]').val();
            $.ajax({url:"{{ action('Home\RoleController@add') }}",data:data,type:'post',async:false,
            success:function(data){
                res = data;
            },error:function(){

                }});
            if(!res || !res.status){
                alert_info('添加失败');
            }else{
                alert_info('添加成功');
            }
            $(this).parents('.modal').modal('hide');
        });


        // 点击 删除 管理员 的 确认按钮
        $('.role-delete button.btn-primary').click(function(){
            var data = {};
            data.id = $('#example1').attr('data-id');
            data._token = $('meta[name=_token]').attr('content');
            $.ajax({url:'{{ action("Home\RoleController@delete") }}',type:'post',data:data,success:function(res,err){
                if(res){
                    if(res.status){
                        alert_info('删除成功','',1);
                        $('#example1 tr[data-id='+data.id+']').remove();
                    }else{
                        alert_info('删除失败','',1);
                    }
                }else{
                    alert_info('请求出错','',1);
                }
            },error:function(){
                alert_info('error');
            }});
            $('.role-delete').modal('hide');
        });

        // span 点击事件
        $('.modal .form-horizontal .row>div>div').on('click','span',function(){
            span_click($(this))
        });
        // span 点击事件 效果
        function span_click(span,type){
            if(span.hasClass('click')||type){
                span.css('background-color','');
                span.removeClass('click');
            }else{
                span.css('background-color','#ddd');
                span.addClass('click')
            }
        }

        $('.role-edit').on('show.bs.modal',function(){
            var data = {};
            var res ;
            var i ;
            var span;
            data.id = $('#example1').attr('data-id');
            data._token = $('meta[name=_token]').attr('content');
            $.ajax({url:"{{ action('Home\RoleController@permission') }}",type:'post',data:data,async:false,
            success:function(data){
                res = data;
            },error:function(){

            }});
            if(!res || !res.status){
                alert_info('获取信息失败');
                return false;
            }
            var Permission = res.data.Permission;
            var RolePermission = res.data.RolePermission;
            $('.role-edit .right').html('');
            $('.role-edit .left').html('');
            if(Permission){
                for(i in Permission){
                    span = $('<span>').attr('data-id',Permission[i].id).html(Permission[i].name);
                    $('.role-edit  .right').append(span);
                }
            }
            if(RolePermission){
                for(i in RolePermission){
                    span = $('<span>').attr('data-id',RolePermission[i].id).html(RolePermission[i].name);
                    $('.role-edit  .left').append(span);
                }
            }
        });


        $('.role-edit .btn-primary').click(function(){
            var RolePermission = new Array();
            var Permission = new Array();
            var data = {};
            var span ;
            var res;
            var l;
            var i;
            span = $('.role-edit .left span.click');
            l = span.length;
            for(i=0;i<l;i++){
                RolePermission.push(span.eq(i).attr('data-id'));
            }
            span = $('.role-edit .right span.click');
            l = span.length;
            for(i=0;i<l;i++){
                Permission.push(span.eq(i).attr('data-id'));
            }
            data.id = $('#example1').attr('data-id');
            data.Permission = Permission;
            data.RolePermission = RolePermission;
            data._token = $('meta[name=_token]').attr('content');
            $.ajax({url:"{{ action('Home\RoleController@setPermission') }}",type:'post',async:false,data:data,
                success:function(data){
                    res = data;
                },error:function(){

                }
            });
            if(!res || !res.status){
                alert_info('修改失败');
                return false;
            }
            Permission = res.data.Permission;
            if(Permission){
                for( i in Permission){
                    span = $('.role-edit .right span[data-id='+Permission[i]+']')
                    span_click(span,1);
                    $('.role-edit .left').append(span);
                }
            }
            RolePermission = res.data.RolePermission;
            if(RolePermission){
                for( i in RolePermission){
                    span = $('.role-edit .left span[data-id='+RolePermission[i]+']')
                    span_click(span,1);
                    $('.role-edit .right').append(span);
                }

            }

        });


    </script>
@endsection

@section('Modal')

    {{--  添加 店铺 的 弹框 --}}
    <div class="modal fade role-Add"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加角色</h4>
                </div>
                <form action="" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">角色名称<span style="color:red;">*</span> :</label>
                            <div class="col-sm-8 text-left">
                                <input class="form-control" type="text" name="name" minlength="5" placeholder="">
                            </div>
                        </div>
                        {{--<div class="form-group">--}}
                            {{--<label class="col-sm-3 text-right control-label">店铺地址 :</label>--}}
                            {{--<div class="col-sm-8 text-left">--}}
                                {{--<input class="form-control" type="text" name="Address" minlength="5" placeholder="">--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    {{--<div class="modal fade role-edit"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">--}}
        {{--<div class="modal-dialog" role="document">--}}
            {{--<div class="modal-content">--}}
                {{--<div class="modal-header">--}}
                    {{--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>--}}
                    {{--<h4 class="modal-title" id="myModalLabel">编辑店铺</h4>--}}
                {{--</div>--}}
                {{--<form action="" class="form-horizontal">--}}
                    {{--<div class="modal-body">--}}
                        {{--<div class="form-group">--}}
                            {{--<input class="form-control" type="hidden" name="Id" >--}}
                            {{--<label class="col-sm-3 text-right control-label">店铺名称<span style="color:red;">*</span> :</label>--}}
                            {{--<div class="col-sm-8 text-left">--}}
                                {{--<input class="form-control" type="text" name="Name">--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="form-group">--}}
                            {{--<label class="col-sm-3 text-right control-label">店铺地址 :</label>--}}
                            {{--<div class="col-sm-8 text-left">--}}
                                {{--<input class="form-control" type="text" name="Address">--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    {{--<div class="modal-footer">--}}
                        {{--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>--}}
                        {{--<button type="button" class="btn btn-primary">确认</button>--}}
                    {{--</div>--}}
                {{--</form>--}}
            {{--</div>--}}
        {{--</div>--}}
    {{--</div>--}}


    <div class="modal fade role-delete"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">角色删除</h4>
                </div>
                <div class="modal-body">
                    确定要删除此角色吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade role-edit"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">角色权限管理</h4>
                </div>
                <div class="form-horizontal">
                    <div class="row">
                        <input type="hidden" name="Id">
                        <div class="col-xs-6 col-md-6">
                            <h6 style="margin-left:30px;">以获得权限</h6>
                            <div class="left">


                            </div>
                        </div>
                        <div class="col-xs-6 col-md-6">
                            <h6 style="margin-left:30px;">未获取权限</h6>
                            <div class="right">


                            </div>
                        </div>
                        <div class="col-xs-12 col-md-12 button">

                        </div>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('content')

    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">{{ session('action.Name') }}</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive ">
                    <div class="form-group text-right">
                        <button class="btn btn-info" data-toggle="modal" data-target=".role-Add" style="margin-right:2rem;">添加角色</button>
                    </div>
                    <table id="example1" class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th style="min-width:100px;">编号</th>
                            <th style="min-width:100px;">角色名</th>
                            <th>权限查看</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody>

                        @foreach($role as $info)
                            <tr data-id="{{ $info->id }}">
                                <td>{{ $info->id }}</td>
                                <td>{{ $info->name }}</td>
                                <td>
                                    <button class="btn btn-success btn-xs" data-toggle="modal" data-target=".role-edit">编辑</button>
                                <td>
                                    <button class="btn btn-danger btn-xs" data-toggle="modal" data-target=".role-delete">删除</button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr>
                            <th colspan="6" class="text-right" style="padding:1rem 2rem 1rem 2rem;">
                                {!! $role->links('Page') !!}
                            </th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>


@endsection